<template>
  <AdTable v-bind="tableConfig" ref="tableRef"></AdTable>
</template>
<script lang="ts" setup>
import { useMergeTableRows } from '@fe-hl/admin-design-vue';
import type { AdTablePorps, AdTableInstance } from '@fe-hl/admin-design-vue';
import { ref } from 'vue';
import data from './data';

const tableRef = ref<AdTableInstance>();
const tableConfig = ref<AdTablePorps>({
  api: () => Promise.resolve(data), // 模拟ajax请求
  table: {
    spanMethod: ({ rowIndex, columnIndex }: any) =>
      useMergeTableRows({
        rowIndex,
        columnIndex,
        list: tableRef.value?.list || [],
        rules: {
          id: 0,
        },
      }),
  },
  columns: [
    { label: 'id', prop: 'id' },
    { label: 'name', prop: 'name' },
    { label: 'amount1', prop: 'amount1' },
    { label: 'amount2', prop: 'amount2' },
    { label: 'amount3', prop: 'amount3' },
  ],
});
</script>
